<!-- picker选择器 -->
<link rel="stylesheet" href="/assets/assets(home)/plugin/mui/mui.picker.css" />
<link rel="stylesheet" href="/assets/assets(home)/plugin/mui/mui.poppicker.css" />
<script src="/assets/assets(home)/plugin/mui/mui.picker.js"></script>
<script src="/assets/assets(home)/plugin/mui/mui.poppicker.js"></script>

<!-- animate.css -->
<link rel="stylesheet" href="/assets/assets(home)/plugin/animate.min.css">

<!-- wowjs -->
<script src="/assets/assets(home)/plugin/wow.min.js"></script>

<title>订单结算</title>

<link rel="stylesheet" href="/assets/assets(home)/css/confirm.css">

<!-- <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">订单结算</h1>
</header> -->

<form method="post">
    <div class="course">
        <div class="left">
            <div class="thumb">
                <img src="{$subject.thumbs_text}" alt="">
            </div>
        </div>
        <div class="right">
            <div class="name">{$subject.title}</div>
            <div class="teacher">授课老师：{$subject.teacher.name ? $subject.teacher.name : '暂无关联老师'}</div>
            <div class="type">课程分类：{$subject.category.name ? $subject.category.name : '暂无课程分类'}</div>
        </div>
    </div>

    <div class="coupon-info">
        <div class="text">
            优惠券：
        </div>
        <div class="coupon">请选择优惠券</div>
        <input type="hidden" name="coupon" value="" />
    </div>

    <div class="price-info">
        <div class="text">
            课程价格：
        </div>
        <div class="price">
            ￥{$subject.price}
        </div>
    </div>

    <div class="pay-info">
        <div class="text">
            支付方式：
        </div>
        <div class="pay" id="pay">余额</div>
        <input type="hidden" name="pay" value="money" />
    </div>

    <div class="footer">
        <div class="total">
            总价：<span id="total">￥{$subject.price}</span>
        </div>
        <button type="submit" class="btn">提交</button>
    </div>
</form>

<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: null // 可选滚动容器选择器，否则使用窗口
    }).init();

    //选择支付方式
    $('#pay').click(function () {
        var picker = new mui.PopPicker();

        //设置数据
        picker.setData([
            { value: 'money', text: '余额' },
            { value: 'wx', text: '微信' },
            { value: 'zfb', text: '支付宝' }

        ])

        // 显示弹框
        picker.show(function (item) {
            $("#pay").html(item[0].text)
            $("input[name=pay]").val(item[0].value)
        })
    })

    //选择优惠券
    var coupon;

    try {
        coupon = `{$coupon}`
        coupon = JSON.parse(coupon) ? JSON.parse(coupon) : []
    } catch (err) {
        coupon = []
    }

    if (coupon.length <= 0) {
        $(".coupon").html('暂无优惠券')
    }

    $(".coupon").click(function () {
        if (coupon.length <= 0) {
            mui.toast('暂无优惠券')
            return false
        }

        var data = [];

        coupon.map((item) => {
            data.push({
                value: item.id,
                rate: item.coupon.rate,
                text: `【${item.coupon.title}】 ${item.coupon.rate * 100} 折`
            })
        })

        var picker = new mui.PopPicker();

        //设置数据
        picker.setData(data);

        // 显示弹框
        picker.show(function (item) {
            $(".coupon").html(item[0].text)
            $("input[name=coupon]").val(item[0].value)

            var rate = item[0].rate //折扣率
            rate = parseFloat(rate)

            var price = `{$subject.price}`
            price = parseFloat(price)

            var total = price * rate
            total = total.toFixed(2)
            $("#total").html(total)
        })
    })
</script>